﻿@{
    Layout = null;
}

 


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title></title>
    <style>

        td {
            border: 1px solid gray;
        }

        table {
            border-collapse: collapse;
        }

        div#app {
            margin: 20px auto;
            width: 400px;
            padding: 20px;
        }
    </style>


    <script src="~/js/axios.js"></script>
    <script src="~/js/vue.js"></script> 
</head>
<body>
    <div id="app">
        <table>
            <thead> <tr><th>名字</th><th>血量</th><th>操作</th> </tr></thead>
            <tbody>
                <tr v-for="(hero, idx) in heros">
                    <td ><input type="text" v-model="hero.Name"></td>
                    <td ><input type="text" v-model="hero.Health"></td>
                    <td><a href="#Edit" v-on:click="UpdateHero(idx,hero)">Edit</a>
                    <a href="#Delete" v-on:click="DeleteHero(hero)">Delete</a></td>
                </tr>               

                <tr> 
                        <td> <input type="text"  v-model="heroToAdd.Name"/></td>
                        <td> <input type="text"  v-model="heroToAdd.Health"/></td> 
                        <td> <a href="#add" v-on:click="AddHero()">Add</a></td>
                </tr>
            </tbody>
        </table>
    </div>

   

</body>

</html>

 <script>
    var vm = new Vue({

        el: "#app",
        data: {
            heros: [],
            heroToAdd: {}
        },
        mounted() {
           this.GetAllHeros();
        },        
        methods: {
            GetAllHeros: function () {
                axios.get('@Url.Action("Get" )')
                    .then((resp) => {
                       this. heros = resp.data;

                        var json = JSON.stringify(resp);                      
                        console.info(json);
                    })
            },
            DeleteHero: function (argHero) {
              axios.post('@Url.Action("Delete" )',"name="+argHero.Name   )
                    .then((resp) => { this.GetAllHeros() }) 

            },

            UpdateHero: function (argIdx, argHero) {
                axios.post('@Url.Action("Update" )', { idx: argIdx, hero:argHero } )
                    .then((resp) => { this.GetAllHeros() })
            },
            AddHero: function () {
                axios.post('@Url.Action("Add" )', { hero:this.heroToAdd }  )
                    .then((resp) => {
                        this.GetAllHeros();
                        this.heroToAdd = {};
                    })
            }
        }

    })
</script>